<template>
    <render v-if="filter" :data="filter" @submit="filterHandle"></render>
    <render :data="header" v-if="header"></render>
    <div ref='echart' :style="{height:height,width:width}" />
    <render :data="footer" v-if="footer"></render>
</template>

<script>
    export default {
        name: "ExEchart",
        inheritAttrs:false,
    }
</script>
<script setup>
    import chinaMap from '@/assets/map/chinaChange.json'
    import * as echarts from 'echarts'
    import {ref, onUpdated, onMounted, onBeforeUnmount} from "vue"
    import request from '@/utils/axios'
    echarts.registerMap('china',chinaMap)
    const props = defineProps({
        width: {
            type: String,
            default: '100%'
        },
        height: {
            type: String,
            default: '350px'
        },
        options: {
            type: Object,
            default: {}
        },
        filter: [Object, Boolean],
        url: String,
        params: {
          type: Object,
          default: {},
        },
        callParams: {
          type: Object,
          default: {},
        },
        header: [Object, Boolean],
        footer: [Object, Boolean],
    })
    const echart = ref('')
    const header = ref(props.header)
    const footer = ref(props.footer)
    const options = ref(props.options)
    let chart = null
    function chartRender() {
        if(!chart){
            chart = echarts.init(echart.value)
        }
        chart.setOption(options.value)
        chart.resize()
    }
    onMounted(()=>{
      chartRender()
    })
    onUpdated(()=>{
      chartRender()
    })

    window.addEventListener("resize", resize)
    function resize(){
      if(chart){
        chart.resize()
      }
    }
    function params(){
      const params = {}
      Object.assign(params,props.callParams,props.params)
      return params
    }
    //筛选
    function filterHandle(data){
      request({
        url: props.url,
        method: 'post',
        data:  Object.assign({'ex_admin_filter':true},params(),data)
      }).then(res => {
        const attribute = res.attribute
        header.value = attribute.header
        footer.value = attribute.footer
        options.value = attribute.options
        chartRender()
      })

    }
    onBeforeUnmount(()=>{
        if(chart){
            chart.dispose()
            chart = null
        }
        window.removeEventListener("resize",resize)
    })
</script>
<style scoped>

</style>
